<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4-1-3-下拉菜单</title>
<link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">
<style type="text/css">
	.dropdown{
		display: inline-block;
	}
	.dropdown-menu{
		min-width: 94px;
		background-color: yellow;
	}

	.dropdown-menu li{
		background-color: red;
	}
	.dropdown-menu li a:hover{
		background-color: blue;
	}

</style>
</head>
<body>

<div class="container">
		<div class="dropdown" id="dropdown1">
			<button class="btn btn-primary" id="dlabel" data-toggle="dropdown">
				触发前<span class="caret"></span>
			</button>
			<ul class="dropdown-menu" >
				<li><a href=""> 1</a></li>
				<li><a href="">	2</a></li>
				<li><a href="">	3</a></li>
			</ul>

		</div>

	
	<div class="dropdown" id="myDropdown">
		<button class="btn btn-success btn-md" type="button" data-toggle="dropdown">触发后<Span class="caret"></Span></button>
		<ul class="dropdown-menu">
			<li><a href="#">11</a></li>
			<li><a href="#">22</a></li>
			<li><a href="#">33</a></li>
		</ul>
	</div>

</div>




<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
<script type="text/javascript">
//显示之前
	$("#dropdown1").on( "show.bs.dropdown", function(e){
		alert("弹出框：这个元素触发 show.bs.dropdown 函数，下拉菜单显示之前触发")
	})
//显示之后
	$("#myDropdown").on( "shown.bs.dropdown", function(e){
		alert("弹出框：这个元素触发 show.bs.dropdown 函数，下拉菜单显示之后触发")
	})
//隐藏之前
	$("#dropdown1").on( "hide.bs.dropdown", function(e){
		alert("弹出框：这个元素触发 hide.bs.dropdown 函数，下拉菜单隐藏之前触发")
	})
//隐藏之后
	$("#myDropdown").on( "hide.bs.dropdown", function(e){
		alert("弹出框：这个元素触发 hide.bs.dropdown 函数，下拉菜单隐藏之后触发")
	})

</script>

</body>
</html>